// 注册的表单界面

import React, { useEffect, useState } from 'react';
import { Form, Input, Select, Button, Modal, message } from 'antd';
import { UserOutlined, LockOutlined, MailOutlined, PhoneOutlined } from '@ant-design/icons';
import { useRequest } from 'ahooks';
import { request } from '@umijs/max';
const crypto = require('crypto')
import { registerServices } from '@/services/userApi'

const { Option } = Select;

interface RegisterFormProps {
    isModalVisible: boolean;
    handleCancel: () => void;
    roleData: { label: string; value: string }[];
}

const RegisterForm: React.FC<RegisterFormProps> = ({ isModalVisible, handleCancel, roleData }) => {

    const requestRegister = useRequest(registerServices, {
        manual: true, // 关闭自动请求
        loadingDelay: 500,
        onSuccess: (data) => {
            console.log("data", data);
            Promise.resolve(data)
        },
    });

    return (
        <Modal
            title="创建新用户"
            visible={isModalVisible}
            onCancel={handleCancel}
            footer={null}
        >
            <Form
                name="register"
                initialValues={{ remember: true }}
                onFinish={async (values) => {
                    console.log("register >>> ", values);
                    values.password = crypto.createHash('sha256').update(values.password).digest('hex')
                    requestRegister.run(values)
                    message.success('注册成功');
                }}
                layout="vertical"
            >
                <Form.Item
                    label="账号"
                    name="userName"
                    tooltip="用于系统登录的唯一标识，请以你姓名的首字母"
                    rules={[{ required: true, message: '请输入账号!' }]}
                >
                    <Input prefix={<UserOutlined />} placeholder="请输入账号" />
                </Form.Item>

                <Form.Item
                    label="昵称"
                    name="nickName"
                    tooltip="昵称为你们的真实姓名"
                    rules={[{ required: true, message: '请输入账号!' }]}
                >
                    <Input prefix={<UserOutlined />} placeholder="请输入账号" />
                </Form.Item>

                <Form.Item
                    label="密码"
                    name="password"
                    tooltip="密码没有复杂度验证，请记住！！！"
                    rules={[{ required: true, message: '请输入密码!' }]}
                >
                    <Input.Password prefix={<LockOutlined />} placeholder="请输入密码" />
                </Form.Item>

                <Form.Item
                    label="邮箱"
                    name="email"
                    tooltip="为你们的邮箱，后续找回密码用"
                    rules={[
                        { required: true, message: '请输入邮箱!' },
                        { type: 'email', message: '请输入有效的邮箱地址!' },
                    ]}
                >
                    <Input prefix={<MailOutlined />} placeholder="请输入邮箱" />
                </Form.Item>

                <Form.Item
                    label="手机号"
                    name="phone"
                    tooltip="请输入真实手机号，方便联系"
                    rules={[
                        { required: true, message: '请输入手机号!' },
                        { pattern: /^1[3-9]\d{9}$/, message: '请输入有效的手机号!' },
                    ]}
                >
                    <Input prefix={<PhoneOutlined />} placeholder="请输入手机号" />
                </Form.Item>

                <Form.Item
                    label="角色"
                    name="role"
                    tooltip="角色分为 组长-leader 成员-crew 教师-teacher"
                    rules={[{ required: true, message: '请选择角色!' }]}
                >
                    <Select placeholder="请选择角色">
                        {roleData.map((role) => (
                            <Option key={role.value} value={role.value}>
                                {role.label}
                            </Option>
                        ))}
                    </Select>
                </Form.Item>

                <Form.Item>
                    <Button type="primary" htmlType="submit">
                        注册
                    </Button>
                </Form.Item>
            </Form>
        </Modal>
    );
};

export default RegisterForm;